<template>
  <view class="login-page">
    <view class="login-page-box">
      <view class="login-page-box-user inputbox">
        <u-icon name="account-fill" color="#909399" size="24"></u-icon>
        <input
          type="text"
          placeholder="请输入用户名"
          v-model="loginForm.username"
          class="inputbox-input"
        />
      </view>
      <view class="login-page-box-user inputbox">
        <u-icon name="lock-fill" color="#909399" size="24"></u-icon>
        <input
          type="text"
          placeholder="请输入密码"
          v-model="loginForm.password"
          class="inputbox-input"
        />
      </view>
    </view>
    <view class="login-page-button">
      <view
        class="login-page-button-item login"
        hover-class="button-checkActive"
        @click="loginHandler"
        >登 陆</view
      >
      <view
        class="login-page-button-item register"
        hover-class="button-checkActive"
        >注 册</view
      >
    </view>
  </view>
</template>

<script>
import { login } from "@/api/app.js";
export default {
  data() {
    return {
      loginForm: { username: "songwenjie", password: "swj5967287" },
    };
  },
  methods: {
    loginHandler() {
      const { username, password } = this.loginForm;
      login({ username, password }).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "登录成功",
            //将值设置为 success 或者直接不用写icon这个参数
            icon: "success",
            //显示持续时间为 2秒
            duration: 2000,
          });
          setTimeout(() => {
            uni.switchTab({
              url: "../index/index",
            });
          }, 1000);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("https://img0.baidu.com/it/u=3672693458,2355924401&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889");
  &-box {
    position: relative;
    margin-top: 600rpx;
    width: 80%;
    .inputbox {
      height: 80rpx;
      border: none;
      color: #fff;
      background-color: rgba($color: #666666, $alpha: 0.6);
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      .inputbox-input {
        margin-left: 30rpx;
        .uni-input-placeholder {
          color: #fff;
        }
      }
    }
    &-user {
    }
  }
  &-button {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    &-item {
      width: 80%;
      height: 100rpx;
      border-radius: 30rpx;
      margin-top: 40rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 50rpx;
      color: #fff;
    }
    .login {
      background-color: #000000;
      opacity: 0.8;
    }
    .register {
      background-color: #28943f;
      opacity: 0.9;
    }
    .button-checkActive {
      opacity: 0.6;
      color: #ecfaff;
    }
  }
}
</style>
